<template>
  <view class="container">
    <!-- 顶部标题栏 -->
    <view class="header">
      <text class="header-title">亚昭商城</text>
    </view>

    <!-- 轮播图（Banner） -->
    <swiper class="banner" autoplay="true" interval="3000" circular="true">
      <swiper-item 
        v-for="(item, index) in bannerList" 
        :key="index" 
        @click="onBannerClick(index)"
      >
        <image :src="item" class="banner-image"></image>
      </swiper-item>
    </swiper>

    <!-- 通知（通报） -->
    <view class="notice" @click="onNoticeClick">
      <text>全场特价优惠中！</text>
    </view>

    <!-- 推荐商品横向滑动 -->
    <view class="recommend-products">
      <view class="section-title">推荐商品</view>
      <scroll-view class="horizontal-scroll" scroll-x="true">
        <view 
          class="product-item" 
          v-for="(item, index) in recommendProducts" 
          :key="index" 
          @click="onRecommendProductClick(index)"
        >
          <image :src="item.image" class="product-image"></image>
          <text class="product-name">{{ item.name }}</text>
        </view>
      </scroll-view>
    </view>

    <!-- 新品上架 -->
    <view class="new-products">
      <view class="section-title">新品上架</view>
      <view 
        class="new-product-item" 
        v-for="(item, index) in newProducts" 
        :key="index" 
        @click="onNewProductClick(index)"
      >
        <image :src="item.image" class="new-product-image"></image>
        <view class="new-product-info">
          <text class="new-product-name">{{ item.name }}</text>
          <view class="tags">
            <text 
              v-for="(tag, index) in item.tags" 
              :key="index" 
              class="tag"
            >
              {{ tag }}
            </text>
          </view>
          <text class="price">￥{{ item.price }}</text>
        </view>
      </view>
    </view>
</template>

<script>
export default {
  data() {
    return {
      bannerList: [
        'path/to/banner1.jpg',
        'path/to/banner2.jpg',
        'path/to/banner3.jpg',
      ],
      recommendProducts: [
        { name: '玉信琮琚', image: 'path/to/product1.jpg' },
        { name: '厌贡性球', image: 'path/to/product2.jpg' },
        { name: '相合之玉', image: 'path/to/product3.jpg' },
      ],
      newProducts: [
        {
          name: '璞肌美玉',
          image: 'path/to/new1.jpg',
          tags: ['物超所值', '权威证书', '精选挑选'],
          price: 20289,
        },
        {
          name: '其他新品',
          image: 'path/to/new2.jpg',
          tags: ['热销', '新品'],
          price: 899,
        },
      ],
      navItems: [
        { text: '首页', icon: 'path/to/icon1.png' },
        { text: '抢购', icon: 'path/to/icon2.png' },
        { text: '仓库', icon: 'path/to/icon3.png' },
        { text: '我的', icon: 'path/to/icon4.png' },
      ],
    };
  },
  methods: {
    // 轮播图点击事件
    onBannerClick(index) {
      console.log(`轮播图第 ${index + 1} 张被点击`);
      // 示例跳转逻辑
      uni.navigateTo({
        url: `/pages/bannerDetail/bannerDetail?index=${index}`,
      });
    },

    // 通知点击事件
    onNoticeClick() {
      console.log('通知被点击');
      // 示例跳转逻辑
      uni.navigateTo({
        url: '/pages/notice/notice',
      });
    },

    // 推荐商品点击事件
    onRecommendProductClick(index) {
      const product = this.recommendProducts[index];
      console.log(`推荐商品 "${product.name}" 被点击`);
      // 示例跳转逻辑
      uni.navigateTo({
        url: `/pages/productDetail/productDetail?name=${product.name}`,
      });
    },

    // 新品上架商品点击事件
    onNewProductClick(index) {
      const product = this.newProducts[index];
      console.log(`新品 "${product.name}" 被点击`);
      // 示例跳转逻辑
      uni.navigateTo({
        url: `/pages/productDetail/productDetail?name=${product.name}&price=${product.price}`,
      });
    },

    // 底部导航栏点击事件
    onNavClick(index) {
      const nav = this.navItems[index];
      console.log(`底部导航 "${nav.text}" 被点击`);
      // 示例跳转逻辑
      switch (index) {
        case 0:
          uni.switchTab({ url: '/pages/home/home' });
          break;
        case 1:
          uni.switchTab({ url: '/pages/flashSale/flashSale' });
          break;
        case 2:
          uni.switchTab({ url: '/pages/warehouse/warehouse' });
          break;
        case 3:
          uni.switchTab({ url: '/pages/my/my' });
          break;
      }
    },
  },
};
</script>

<style>
/* 保持之前的样式 */

.container {
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}
.header {
  height: 50px;
  background-color: #4CAF50;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-title {
  color: white;
  font-size: 18px;
  font-weight: bold;
}
.banner {
  height: 200px;
}
.banner-image {
  width: 100%;
  height: 100%;
}
.notice {
  padding: 10px;
  background-color: #fffbea;
  color: #ff9800;
  text-align: center;
}
.recommend-products {
  margin-top: 10px;
  padding: 10px;
  background-color: #fff;
}
.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}
.horizontal-scroll {
  display: flex;
  flex-direction: row;
  overflow-x: scroll;
}
.product-item {
  width: 100px;
  margin-right: 10px;
  text-align: center;
}
.product-image {
  width: 100px;
  height: 100px;
  border-radius: 10px;
}
.product-name {
  font-size: 14px;
  margin-top: 5px;
}
.new-products {
  margin-top: 10px;
  padding: 10px;
  background-color: #fff;
}
.new-product-item {
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
}
.new-product-image {
  width: 80px;
  height: 80px;
  border-radius: 10px;
}
.new-product-info {
  flex: 1;
  margin-left: 10px;
}
.new-product-name {
  font-size: 16px;
  font-weight: bold;
}
.tags {
  margin: 5px 0;
}
.tag {
  font-size: 12px;
  color: #4CAF50;
  background-color: #E8F5E9;
  padding: 2px 5px;
  margin-right: 5px;
  border-radius: 5px;
}
.price {
  color: #ff5722;
  font-size: 16px;
  font-weight: bold;
}
.footer {
  height: 50px;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.nav-item {
  text-align: center;
}
.nav-icon {
  width: 24px;
  height: 24px;
}
.nav-text {
  font-size: 12px;
  margin-top: 2px;
}
</style>
